<template>
  <view>
    <!-- #ifdef H5 -->
    <view v-if="!this.$wechat.isWeixin()">
      <view class="text-section">
        <view>{{ content }}</view>
      </view>
      <view v-html="formContent"></view>
    </view>
    <!-- #endif -->
    <view v-if="this.$wechat.isWeixin()">
      <view class="text-section">
        <view>点击复制网址去浏览器中打开</view>
        <view class="link">{{ link }}</view>
      </view>
      <view class="button-section">
        <!-- #ifdef H5 -->
        <button class="button copy" :data-clipboard-text="link">点击复制</button>
        <!-- #endif -->
        <!-- #ifdef MP -->
        <button class="button copy" @click="copyLink">点击复制</button>
        <!-- #endif -->
        <button class="button off" @click="goDetail">完成支付</button>
      </view>
    </view>
    <!-- #ifdef H5 -->
    <view v-show="hintShow" class="hint" @click="hintShow = false">
      <view>点击右上角
        <text class="iconfont icon-xiangyou"></text>
      </view>
      <view>选择 在浏览器 打开，去支付宝支付</view>
    </view>
    <!-- #endif -->
  </view>
</template>

<script>
// #ifdef H5
import ClipboardJS from '@/plugin/clipboard/clipboard.js';
import {mapGetters} from 'vuex';
import {toLogin} from '@/libs/login.js';
import {orderPay} from '@/api/order.js';
import {alipayFull} from '@/api/user.js';

export default {
  data() {
    return {
      // #ifdef H5
      isWeixin: this.$wechat.isWeixin(),
      hintShow: true,
      // #endif
      orderId: '',
      link: '',
      pay_key: '',
      content: '正在支付中',
      formContent: ''
    };
  },
  computed: mapGetters(['isLogin']),
  onLoad(option) {
    if (!this.isLogin && this.$wechat.isWeixin()) {
      toLogin();
    }
    this.orderId = option.id;
    let rechar_id = option.id;
    let type = option.type;
    let price = option.price;
    if (!this.$wechat.isWeixin()) {
      if (type === 'order') {
        this.link = location.protocol + '//' + window.location.host + '/pages/goods/alipay_invoke/index?orderNo=' + this.orderId + '&type=order';
        if (!this.orderId) {
          this.content = '支付订单不存在，页面将在2秒后自动关闭！';
          uni.showToast({
            title: '支付订单不存在,页面将在2秒后自动关闭',
            icon: 'none'
          });
          setTimeout(() => {
            uni.switchTab({
              url: '/pages/index/index'
            });
          }, 2000);
        }
        uni.showLoading({
          title: '正在支付中'
        });
        orderPay({
          orderNo: this.orderId,
          payChannel: 'alipay',
          payType: 'alipay'
        }).then(res => {
          uni.hideLoading();
          that.$nextTick(() => {
            document.forms['punchout_form'].submit();
          })
        }).catch(err => {
          uni.hideLoading();
          uni.showToast({
            title: err,
            icon: 'none'
          });
          setTimeout(() => {
            uni.switchTab({
              url: '/pages/index/index'
            });
          }, 2000);
        })
      } else {
        this.link = location.protocol + '//' + window.location.host + `/pages/goods/alipay_invoke/index?price=${price}&rechar_id=${rechar_id}&type=users`;
        alipayFull({
          from: 'alipay',
          price: price,
          payType: 'alipay',
          rechar_id: rechar_id
        }).then(res => {
          //h5支付
          uni.hideLoading();
          that.$nextTick(() => {
            document.forms['punchout_form'].submit();
          })
        }).catch(res => {
          uni.hideLoading();
          return that.$util.Tips({
            title: res
          });
        })

      }

    }
  },
  onReady() {
    this.$nextTick(() => {
      // #ifdef H5
      const clipboard = new ClipboardJS(".copy");
      clipboard.on("success", () => {
        uni.showToast({
          title: '复制成功'
        });
      });
      // #endif
    });
  },
  methods: {
    // #ifdef MP
    copyLink() {
      uni.setClipboardData({
        data: this.link,
        success() {
          uni.showToast({
            title: '复制成功',
            icon: 'success'
          });
        },
        fail() {
          uni.showToast({
            title: '复制失败',
            icon: 'none'
          });
        }
      });
    },
    // #endif
    goDetail() {
      if (this.orderId) {
        uni.navigateTo({
          url: `/pages/goods/order_details/index?order_id=${this.orderId}`
        });
      } else {
        uni.navigateTo({
          url: `/pages/users/user_money/index`
        });
      }

    }
  }
};
//#endif
</script>

<style>
page {
  background-color: #ffffff;
}
</style>

<style lang="scss" scoped>
.alipaysubmit {
  display: none;
}

.text-section {
  padding-top: 148rpx;
  margin-top: 185rpx;
  background: url('') center top/280rpx 98rpx no-repeat;
  font-weight: bold;
  font-size: 32rpx;
  text-align: center;
  color: #111111;

  .link {
    margin-top: 16rpx;
    margin-right: 98rpx;
    margin-left: 98rpx;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    font-weight: normal;
    color: #666666;
  }
}

.button-section {
  margin-top: 95rpx;
  margin-right: 98rpx;
  margin-left: 98rpx;

  .button {
    height: 80rpx;
    border-radius: 40rpx;
    font-size: 30rpx;
    line-height: 80rpx;

    ~ .button {
      margin-top: 32rpx;
    }

    &.copy {
      background-color: #333333;
      color: #ffffff;
    }

    &.off {
      border: 2rpx solid #999999;
      color: #666666;
    }
  }
}

.hint {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding-top: 156rpx;
  padding-left: 144rpx;
  background: url("") calc(100% - 32rpx) 12rpx/229rpx 178rpx no-repeat;
  font-weight: 500;
  font-size: 30rpx;
  line-height: 68rpx;
  color: #c1c1c1;
  background-color: rgba(0, 0, 0, 0.8);

  .iconfont {
    margin-left: 10rpx;
    font-weight: bold;
    font-size: 30rpx;
  }
}
</style>
